Chart.js — Changing Chart Options

We can make creating charts on a web page easy with Chart.js.

In this article, we’ll look at how to create charts with Chart.js.

Elements Configuration

Wd can change the global element options with the Chart.defaults.global.elements property.

For example, we can write:

Chart.defaults.global.elements.rectangle.borderWidth = 2;

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12.35748, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

to set the border width of the bar to 2px.

Point Configuration

There are many options we can change with points.

For instance, we can change the radius, point styler, rotation, background color, and more.

To change them, we change the Chart.defaults.global.elements.point property.

For example, we can write:

Chart.defaults.global.elements.point.backgroundColor = 'green';

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We get the Chart.defaults.global.elements.point.backgroundColor property to set the background color of a point.

The point properties are applicable for line, radar, and bubble charts.

Line Configuration

We can also change various options for lines.

They include things like tension, background color, border width, border color, line cap style, and more.

To change it, we can write:

Chart.defaults.global.elements.line.borderColor = 'green';

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We have:

Chart.defaults.global.elements.line.borderColor = 'green';

to change the line color to green.

Rectangle Configuration

We can change the rectangle elements that are used to represent the bars in the bar chart.

To do that, we set the properties in the Chart.defaults.global.elements.rectangle property.

Options we can change include background color, border width, border color, and skipping borders on some sides.

For example, we can write:

Chart.defaults.global.elements.rectangle.backgroundColor = 'green';

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12.35748, 19, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We set the Chart.defaults.global.elements.rectangle.backgroundColor property to set the bar color.

Conclusion

We can change the global options for various parts of a graph.